import './index.less';
import { Tabs } from 'antd';
import PublicTitle from '@/components/public-title';
import PublicItem from '@/components/public-item';
export default function RightTop() {
  const namespace = 'righttop';
  const data_week = [
    {
      title: '闭环管控',
      unit: '起',
      count: 4,
    },
    {
      title: '消除隐患',
      unit: '起',
      count: 12,
    },
    {
      title: '打击处理',
      unit: '起',
      count: 6,
    },
  ];
  const data_month = [
    {
      title: '闭环管控',
      unit: '起',
      count: 8,
    },
    {
      title: '消除隐患',
      unit: '起',
      count: 19,
    },
    {
      title: '打击处理',
      unit: '起',
      count: 13,
    },
  ];
  const data_year = [
    {
      title: '闭环管控',
      unit: '起',
      count: 122,
    },
    {
      title: '消除隐患',
      unit: '起',
      count: 245,
    },
    {
      title: '打击处理',
      unit: '起',
      count: 211,
    },
  ];
  return (
    <div className={`${namespace}`}>
      <div className={`${namespace}-title`}>
        <PublicTitle name="预警成效" />
      </div>
      <div className={`${namespace}-content`}>
        <Tabs
          centered
          tabBarGutter={150}
          className={`${namespace}-content-tabs`}
          defaultActiveKey="1"
          items={[
            {
              label: `本周`,
              key: '1',
              children: (
                <div className={`${namespace}-content-data`}>
                  {data_week.map((item, index) => (
                    <PublicItem
                      key={index}
                      title={item.title}
                      unit={item.unit}
                      count={item.count}
                    />
                  ))}
                </div>
              ),
            },
            {
              label: `本月`,
              key: '2',
              children: (
                <div className={`${namespace}-content-data`}>
                  {data_month.map((item, index) => (
                    <PublicItem
                      key={index}
                      title={item.title}
                      unit={item.unit}
                      count={item.count}
                    />
                  ))}
                </div>
              ),
            },
            {
              label: `本年`,
              key: '3',
              children: (
                <div className={`${namespace}-content-data`}>
                  {data_year.map((item, index) => (
                    <PublicItem
                      key={index}
                      title={item.title}
                      unit={item.unit}
                      count={item.count}
                    />
                  ))}
                </div>
              ),
            },
          ]}
        />
      </div>
    </div>
  );
}
